<template>
  <div>
    <el-button type="primary" style="margin-top:20px;" @click="open">添加视频</el-button>
    <el-table :data="dirVideoList">
      <el-table-column label="视频名称" prop="Vname"></el-table-column>
       <el-table-column label="视频时长" prop="Vtime"></el-table-column>
        <el-table-column label="操作">
          <el-link type="danger">删除</el-link>
        </el-table-column>
    </el-table>
    <el-dialog title="添加视频" v-model="videoFlag" width="50%">
            <el-table :data="videoList">
                <el-table-column label="视频名称" prop="Vname"></el-table-column>
                <el-table-column label="绑定课程" prop="Vstate"></el-table-column>
                <el-table-column label="视频时长" prop="Vtime"></el-table-column>
               <el-table-column label="发布日期" >
                  <template #default="{row}">
                    <div>
                        {{new Date(row.createAt).toLocaleString()}}
                    </div>
                  </template>
               </el-table-column>
               <el-table-column label="操作">
                <template #default="{row}">
                      <el-button type="primary" @click="toAdd(row._id)">添加</el-button>
                </template>
               </el-table-column>
            </el-table>
            <el-pagination background layout="prve,pager,next" :total="1000" :page-size="3" @current-change="pageChange"></el-pagination>
    </el-dialog>
  </div>
</template>
<script setup>
import {getVideoListApi} from '@/api/video'
import {addDirVideoApi,getDirVideoApi} from '@/api/course'
import {ref} from 'vue'
import mitt from '@/utils/mitt'
import {useRoute} from 'vue-router'
import {ElMessage} from 'element-plus'
let route=useRoute()
let dirid=ref('')
// 存储下当前的目录id
mitt.on("sendDirId",(dir_id)=>{
  dirid.value=dir_id;
  // 获取目录下的视频列表
    getDirVideoApi({
      CDid:route.query._id,
      _id:dir_id
    }).then(res=>{
      console.log(res,"目录下的视频列表")
      dirVideoList.value=res.data.list //存储列表
    })
})


 let videoFlag=ref(false)
 let open=()=>{
  if( dirid.value){
     videoFlag.value=true;
  }else{
    ElMessage({
      message:"请先选择目录",
      type:"error"
    })
  }
 }
 let pageStart=ref(1)
 let videoList=ref([])
 let total=ref(0)
//  获取视频列表
let pageChange=(val)=>{ //分页
    pageStart.value=val;
    getVideoList();
}
 let getVideoList=async ()=>{
      let res=await getVideoListApi({
        pageStart:pageStart.value,
      })
      console.log(res,"---------------")
      videoList.value=res.data.list;
      total.value=res.data.count
 }
 getVideoList();

//  给目录下添加视频接口
let dirVideoList=ref([]) //目录下的视频列表
let toAdd=async (id)=>{
  let res=await addDirVideoApi({
      cid:route.query._id, //课程的_id
      _id:dirid.value, // 目录的_id
      Vid:id //视频的_id
  })
  console.log(res,"-----------")
  dirVideoList.value=res.data.list;
  videoFlag.value=false;
 
}
</script>